サイドナビメニューcss再検討

あとで参考に画像などhttp://css.uka-p.com/parts/menulist_mark.html

初期設定
/* 左サイドバーをデフォルトとしています*/

#side {
float:left;
width:260px;
padding:10px 10px 50px 10px;
background-color:#f2f2f2;/* ◆C04SL*/
}

/* 右サイドバー用に追加=★★=;*/

#sideright {
float:right;
width:260px;
padding:10px 10px 50px 10px;
background-color:#f2f2f2;/* ◆C05SR */
}

#side h3 {
background-color:#29CCCC;/*★各メニューの頭タイトル#153B8C→#29CCCC */
color:#FFF;
padding:5px;
font-size:14px;
}

#side h3 a {
color:#FFF;
}

★ここまでは変更なし

#side ul {
margin:10px 0px 10px 0px;
list-style:none;
}
#side ul li {
margin:5px 0px 5px 0px;/*★階層メニューの枠寸法*/
padding:5px 3px 5px 3px;
border-bottom: dotted 1px #29CCCC;/*★階層メニューの枠 緑29CCCC*/
border-top: dotted 1px #29CCCC;
border-left: dotted 1px #29CCCC;
border-right: dotted 1px #29CCCC;
background-color:#c0c0c0;/* ★サイドバー背景色#c0c0c0*/
font-size:14px;
}#side ul li hover{
border: dotted 1px #ee8008;/*★階層メニューの枠に緑を*/
background-color: ;
}
#side ul li a:hover {
background:red;
/*★ height: 40px;
width: 240px; */
display: block;
}

#side ul li .children {
margin:0px 0px 0px 0px;/*★階層入子メニューの枠*/
}

#side ul li .children li {
/*★border-bottom:none; */
border: dotted 1px #CC0000;/*★階層メニューの枠*/
margin:0px;
padding: 5px 3px 5px 15px;/*★子・孫下げます */
}

別案
/* 左サイドバーデフォルト*/

#side {
float:left;
width:260px;
padding:10px 10px 50px 10px;
background-color:#f2f2f2;/* ◆C04SL*/
}

/* 右サイドバー用に追加=★★=;*/

#sideright {
float:right;
width:260px;
padding:10px 10px 50px 10px;
background-color:#f2f2f2;/* ◆C05SR */
}

#side h3 {
background-color:#29CCCC;/*★各メニューの頭タイトル#153B8C→#29CCCC */
color:#FFF;
padding:5px;
font-size:14px;
}

#side h3 a {
color:#FFF;
}
★ここまでは変更なし
#side ul {
margin:10px 0px 10px 0px;

padding:0;
list-style:none;
}

 

#side li {
list-style:none;
font-size:12px;
line-height:20px;
}

#side li a {
display:block;
padding:0 5px;
background:#060;
color:#fff;
line-height:20px;
border-bottom:solid 1px #030;
}

 

#side li a:hover {
background: red;
}

#side li .children {
background:#9f9;
color:#030;
border-bottom:solid 1px #6c6;
}
}

#side ul li .children li {
background: blue;
color:#030;
border-bottom:solid 1px #6c6;
}